<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">udi导出</p>
    </div>
    <div class="view-container">
      <el-form :model="form" ref="form" :inline="true">
        <!-- <el-form-item label="销售订单" prop="orderCode">
          <el-input
            v-model="form.orderCode"
            placeholder="请选择"
            clearable
            size="small"
            @focus="listOrderShow"
            :disabled="form.stockCode !== ''"
          />
        </el-form-item> -->
        <el-form-item label="产成品入库" prop="stockCode">
          <el-input
            v-model="form.stockCode"
            placeholder="请选择"
            clearable
            size="small"
            @focus="listProductStockShow"
            :disabled="form.orderCode !== ''"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            class="btn-scanCodeDel"
            type="primary"
            icon="el-icon-download"
            size="small"
            @click="btnExport()"
          >导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 弹出数据 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" top="50px" append-to-body center :before-close="handleClose">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <template v-if="type == 1">
          <el-form-item label="客户名称" prop="customerName">
            <el-input
              v-model="queryParams.customerName"
              placeholder="请输入客户名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="SKU名称" prop="productName">
            <el-input
              v-model="queryParams.productName"
              placeholder="请输入SKU名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="按起止时间" prop="time">
            <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                style="width: 230px;"
                @change="dataTime()"
            >
            </el-date-picker>
          </el-form-item>
        </template>
        <template v-if="type == 2">
          <el-form-item label="批次号" prop="batchNumber">
            <el-input
              v-model="queryParams.batchNumber"
              placeholder="请输入批次号检索"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" class="list-search btn-success" color="#5ED4D4">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="list-search">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="dataList" @row-click="handleSelect" border>
        <el-table-column label="序号" type="index" align="center" width="50">
          <template slot-scope="scope">
            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <template v-if="type == 1">
          <el-table-column label="订单编码"  align="center" prop="orderCode" />
          <el-table-column label="客户名称"  align="center" prop="customerName" />
          <el-table-column label="产品编码" align="center" prop="productCode">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.salesOrderDetailList" :key="index" class="item">
                {{ item.productBasicCode }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="SKU编码" align="center" prop="productCode">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.salesOrderDetailList" :key="index" class="item">
                {{ item.productCode }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" align="center" prop="productName">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.salesOrderDetailList" :key="index" class="item">
                {{ item.productBasicName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="规格" align="center" prop="productSpace">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.salesOrderDetailList" :key="index" class="item">
                {{ item.productSpace }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="审核状态" align="center" prop="approveStatus" width="100px">
            <template slot-scope="scope">
              <div v-if="scope.row.approveStatus == 0" style="color:#13C2C2">待审核</div>
              <div v-if="scope.row.approveStatus == 1" style="color:#52C41A">已审核</div>
              <div v-if="scope.row.approveStatus == 2" style="color:#13C2C2">反审核</div>
              <div v-if="scope.row.approveStatus == 3" style="color:#fd562c">拒绝</div>
              <div v-if="scope.row.approveStatus == null" style="color:#13C2C2">待编辑</div>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status" width="100px">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 1" style="color:#13C2C2">待审核</div>
              <div v-if="scope.row.status == 2" style="color:#52C41A">已审核</div>
              <div v-if="scope.row.status == 3" style="color:#52C41A">已完成</div>
              <div v-if="scope.row.status == 4" style="color:#52C41A">部分出库</div>
              <div v-if="scope.row.status == 9" style="color:#52C41A">自动</div>
              <div v-if="scope.row.status == 0" style="color:#13C2C2">草稿</div>
            </template>
          </el-table-column>
        </template>
        <template v-if="type == 2">
          <el-table-column label="计划编码" align="center" prop="planCode" />
          <el-table-column label="产品名称" align="center" prop="productBasicName" />
          <el-table-column label="规格" align="center" prop="specification" />
          <el-table-column label="产品批号" align="center" prop="batchNumber" />
          <el-table-column label="箱规" align="center" prop="productSpace" />
          <el-table-column label="生产序列号" align="center" prop="productionSerialNumber" />
          <el-table-column label="状态" align="center" prop="status">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 0" style="color:#13C2C2">待入库</div>
              <div v-if="scope.row.status == 1" style="color:#52C41A">已入库</div>
              <div v-if="scope.row.status == 2" style="color:#13C2C2">待确认</div>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-dialog>
  </div>
</template>

<script>
import { exportUdi } from "@/api/system/export/export"
import { orderList } from "@/api/system/order/order"
import { listProductStock } from "@/api/system/productStock/productStock"
export default {
  name: "udiExport",
  data() {
    return {
      orderId: '',
      stockId: '',
      form: {
        orderCode: '',
        stockCode:''
      },
      loading: true,
      total: 0,
      dataList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        customerName: undefined,
        productName: undefined,
        startTime: undefined,
        endTime: undefined,
        batchNumber: undefined
      },
      time: [],
      title: '',
      open: false,
      type: '',
    }
  },
  methods: {
    // 销售订单弹窗
    listOrderShow(){
        this.open = true
        this.title = '销售订单'
        this.type = 1
        this.getList()
    },
    // 产成品入库弹窗
    listProductStockShow(){
      this.open = true
      this.title = '产成品入库'
      this.type = 2
      this.getList()
    },
    // 获取订单列表
    getList() {
      if(this.type == '1'){
        this.loading = true
        this.queryParams.approveStatus = 1
        orderList(this.addDateRange(this.queryParams)).then(res => {
            this.dataList = res.rows
            this.total = res.total
            this.loading = false
          }
        )
      }else{
        this.loading = true
        this.queryParams.status = 1
        listProductStock(this.addDateRange(this.queryParams)).then(res =>{
          this.dataList = res.rows
          this.total = res.total
          this.loading = false
        })
      }
    },
    // 时间选择器
    dataTime(){
      if(this.time){
        let day = 24 * 60 * 60 * 1000
        this.queryParams.startTime = this.parseTime(this.time[0])
        this.queryParams.endTime = this.parseTime(this.time[1].getTime() + day)
      }else if(this.time == null){
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }
    },
    // 搜索按钮
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置按钮
    resetQuery() {
      this.resetForm("queryForm")
      if(this.type == 1){
        this.time = []
        this.queryParams.startTime = undefined
        this.queryParams.endTime = undefined
      }
      this.handleQuery()
    },
    // 选中
    handleSelect(row) {
      // console.log(row)
      if(this.type == 1){
        this.form.orderCode = row.orderCode
        this.orderId = row.id
      }else{
        this.form.stockCode = row.planCode
        this.stockId = row.id
      }
      this.handleClose()
    },
    // 关闭弹窗
    handleClose(){
      this.open = false
      this.title = ''
      this.type = ''
      this.queryParams.approveStatus = undefined
      this.queryParams.status = undefined
      this.resetForm("queryForm")
      this.dataList = []
    },
    // 导出
    btnExport(){
      let data = {}
      if(this.orderId){
        data = {
          orderId: this.orderId
        }
      }else{
        data = {
          stockId: this.stockId
        }
      }
      this.$modal.loading("正在导出")
      exportUdi(data).then(res => {
        this.$modal.closeLoading()
        let blob = new Blob([res], {
          type: res.type,
        })
        let downloadElement = document.createElement("a")
        let href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = "产品UDI信息导出表.xls"
        document.body.appendChild(downloadElement)
        downloadElement.click()
        window.URL.revokeObjectURL(href)
        this.orderId = ''
        this.stockId = ''
        this.form.orderCode = ''
        this.form.stockCode = ''
      })
    }
  }
}
</script>
